import React from "react";
import moment from "moment";
import { DataSet } from "vis-data/standalone";
import { Timeline } from "./Timeline";

const App = () => {
  const [dateRange] = React.useState([
    moment().subtract(1, "d").toDate(),
    moment().toDate(),
  ]);

  const options = {
    //start: startEnd[0],
    //end: startEnd[1],
    //min: startEnd[0],
    //max: startEnd[1],
    // stack: false,
    // start: 100,
    // end: 1000,
    stack: true, // 不重叠
    // timeAxis: { scale: "second" },// 按照秒进行缩放
    moment: function (date) {
      return moment(date).locale("zh-cn"); //moment(date).utcOffset('+08:00');
    },
    min: 0,
    max: 1000 * 60 * 60 * 26, // 26h的时间
    editable: true,
    zoomMin: 1000, // 最小缩放到1s
    verticalScroll: false, // 竖向滚动
    // zoomable: false, // 不能缩放
  };

  const items = new DataSet([
    {
      id: 1,
      content: "item " + 1,
      start: 100,
      end: 1000 * 60 * 60 * 2,
    },
  ]);

  // for (var i = 10; i >= 0; i--) {
  //   var start = new Date(new Date().getTime() + i * 100000);
  //   items.add({
  //     id: i,
  //     content: "item " + i,
  //     start: start,
  //     end: new Date(start.getTime() + 100000),
  //   });
  // }

  return (
    <>
      <Timeline groups={null} items={items} options={options} />
    </>
  );
};

export default App;
